<template>
	<view class="floor">
		<template v-for="item in floorData">
			<swiper class="floor_left" v-if="item.floor_imgs.length > 1" :key="item._id" :indicator-dots="true"
				:autoplay="true" :interval="3000" :duration="1000" circular>
				<swiper-item class="floor_left_item" v-for="(floorItem,index) in item.floor_imgs" :key="index">
					<image :src="floorItem"></image>
					<text class="title">{{item.floor_title}}</text>
				</swiper-item>
			</swiper>
			<view v-else class="floor_right" :key="item._id">
				<image :src="item.floor_imgs[0]"></image>
				<text class="title">{{item.floor_title}}</text>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		name: "floor",
		data() {
			return {
				floorData: [],
			};
		},
		methods: {
			async getFloorsData() {
				const data = await this.$api.home.getFloorsData();
				if (data.meta.status == 200) {
					this.floorData = data.message;
				}
			}
		},
		created() {
			this.getFloorsData();
		}
	}
</script>

<style scoped lang="scss">
	.floor {
		// display: flex;
		width: 680rpx;
		column-count: 2;
		column-gap: 40rpx;
		margin: 30rpx auto;

		.floor_left {
			position: relative;
			width: 320rpx;
			height: 320rpx;
			border-radius: 20rpx;
			overflow: hidden;

			.floor_left_item {

				>image {
					width: 100%;
					height: 100%;
				}

				.title {
					position: absolute;
					top: 20rpx;
					left: 20rpx;
					color: #fff;
					background: rgba($color: #DA7B36, $alpha: 0.5);
					padding: 6rpx;
					border-radius: 10rpx;
					overflow: hidden;
				}
			}
		}

		.floor_right {
			position: relative;
			width: 310rpx;

			>image {
				width: 100%;
				height: 150rpx;
			}

			.title {
				position: absolute;
				top: 10rpx;
				left: 10rpx;
				color: #fff;
				background: rgba($color: #DA7B36, $alpha: 0.5);
				padding: 6rpx;
				border-radius: 10rpx;
				overflow: hidden;
			}
		}
	}
</style>
